import 'package:cached_network_image/cached_network_image.dart';
import 'package:fish_redux/fish_redux.dart';
import 'package:flutter/material.dart';

import 'action.dart';
import 'state.dart';

Widget buildView(
    MemberCenterState state, Dispatch dispatch, ViewService viewService) {
  return Scaffold(
      appBar: AppBar(
        title: const Text('会员中心'),
      ),
      body: _buildBody(state, dispatch, viewService));
}

Widget _buildBody(
    MemberCenterState state, Dispatch dispatch, ViewService viewService) {
  if (state.isLoading) {
    return _buildLoading();
  } else if (state.loadErr) {
    return _buildReload(state, dispatch, viewService);
  } else if (state.isNoLogin) {
    return _buildLogin(state, dispatch, viewService);
  } else {
    return _buildMember(state, dispatch, viewService);
  }
}

Widget _buildReload(
    MemberCenterState state, Dispatch dispatch, ViewService viewService) {
  return Container(
    child: Center(
      child: Container(
        width: 180,
        child: FlatButton(
            child: Text("重新加载"),
            color: Colors.blue,
            textColor: Colors.white,
            onPressed: () {
              dispatch(MemberCenterActionCreator.reloadAction());
            }),
      ),
    ),
  );
}

Widget _buildLoading() {
  return Container(
    child: Center(
      child: CircularProgressIndicator(
        valueColor: AlwaysStoppedAnimation(Colors.orange),
      ),
    ),
  );
}

Widget _buildLogin(
    MemberCenterState state, Dispatch dispatch, ViewService viewService) {
  return Container(
    child: Center(
      child: Container(
        width: 180,
        child: FlatButton(
            child: Text("马上登录"),
            color: Colors.blue,
            textColor: Colors.white,
            onPressed: () {
              dispatch(MemberCenterActionCreator.loginAction());
            }),
      ),
    ),
  );
}

typedef void _OnTap();

class _ListItem {
  String title;
  String text;
  _OnTap onTap;

  _ListItem(this.title, this.text, {this.onTap});
}

List<Widget> _buildBottom(
    MemberCenterState state, Dispatch dispatch, ViewService viewService) {
  List<Widget> children = [];
  if (state.hasPassword != null) {
    String text = state.hasPassword == true ? "修改密码" : "设置密码";
    children.add(
      Container(
        padding: EdgeInsets.only(right: 20),
        child: FlatButton(
          onPressed: () {
            dispatch(MemberCenterActionCreator.setPasswordAction());
          },
          child: Text(text),
          color: Colors.blue,
          textColor: Colors.white,
        ),
      ),
    );
  }
  children.add(Container(
    child: FlatButton(
      onPressed: () {
        dispatch(MemberCenterActionCreator.logoutAction());
      },
      child: Text("退出登录"),
      color: Colors.blue,
      textColor: Colors.white,
    ),
  ));
  return children;
}

Widget _buildMember(
    MemberCenterState state, Dispatch dispatch, ViewService viewService) {
  var items = <_ListItem>[
    _ListItem("用户ID", state.memberId.toString()),
    _ListItem("用户名", state.userName),
    _ListItem("昵称", state.nickName ?? "点击设置", onTap: () {
      dispatch(MemberCenterActionCreator.setNickNameAction());
    }),
    _ListItem("邮箱", state.email ?? "点击设置", onTap: () {
      dispatch(MemberCenterActionCreator.setEmailAction());
    }),
  ];
  return Container(
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        new Container(
          height: 150,
          width: 150,
          padding: EdgeInsets.all(10.0),
          child: GestureDetector(
            onTap: () {
              dispatch(MemberCenterActionCreator.setAvaterAction());
            },
            child: new CircleAvatar(
              backgroundImage: new CachedNetworkImageProvider(
                  "${state.avatarUrl}?width=300"),
            ),
          ),
        ),
        Expanded(
          child: ListView.separated(
            scrollDirection: Axis.vertical,
            itemCount: items.length, // item 的个数
            separatorBuilder: (BuildContext context, int index) =>
                Divider(height: 1.0, color: Colors.blue),
            itemBuilder: (BuildContext context, int index) {
              return ListTile(
                title: Text(items[index].title),
                subtitle: Text(items[index].text),
                trailing: items[index].onTap == null
                    ? null
                    : Icon(Icons.keyboard_arrow_right),
                isThreeLine: false,
                dense: true,
                contentPadding: EdgeInsets.only(left: 10),
                enabled: true,
                onTap: items[index].onTap,
                selected: false, // item 是否选中状态
              );
            },
          ),
        ),
        new Container(
          padding: EdgeInsets.all(10),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: _buildBottom(state, dispatch, viewService),
          ),
        )
      ],
    ),
  );
}
